<template>
    <div class="page-top-container">
        <div class="page-top-one">
            <div class="page-top-title">追溯信息填报</div>
            <img class="p-t-o-bg" src="@/assets/top-bg1.png" alt="">
            <img class="page-top-logo" src="@/assets/logo.png" alt="">
        </div>
        <div class="page-top-two">
            <img class="p-t-t-bg" src="@/assets/top-bg2.png" alt="">
            <img class="p-t-t-border" src="@/assets/top-bg3.png" alt="">
            <div class="p-t-t-content yuan-form">
                <div class="p-t-t-list">
                    <span class="p-t-t-title">【<span class="p-t-t-text">药材类型</span>】</span>
                    <span class="p-t-t-info nowrap">{{detailInfo.rawType}}</span>
                </div>
                <div class="p-t-t-list">
                    <span class="p-t-t-title">【<span class="p-t-t-text">品种</span>】</span>
                    <span class="p-t-t-info nowrap">{{detailInfo.varietyName}}</span>
                </div>
                <div class="p-t-t-list">
                    <span class="p-t-t-title">【<span class="p-t-t-text">拉丁文名</span>】</span>
                    <span class="p-t-t-info nowrap">{{detailInfo.basinymLatin}}</span>
                </div>
                <div class="p-t-t-list">
                    <span class="p-t-t-title">【<span class="p-t-t-text">入库数量</span>】</span>
                    <span class="p-t-t-info nowrap">{{detailInfo.enterStorageNum}}{{detailInfo.unit}}</span>
                </div>
                <div class="p-t-t-list">
                    <span class="p-t-t-title">【<span class="p-t-t-text">药材类别</span>】</span>
                    <span class="p-t-t-info nowrap">{{medicineType[detailInfo.medicineType]}}</span>
                </div>
                <div class="p-t-t-list">
                    <span class="p-t-t-title">【<span class="p-t-t-text">药材来源</span>】</span>
                    <span class="p-t-t-info nowrap">{{sourceType[detailInfo.source]}}</span>
                </div>
                <!-- <div class="p-t-t-list">
                    <span class="p-t-t-title">【<span class="p-t-t-text">选择模板</span>】</span>

                    <span class="p-t-t-info form-select iconfont" @click="showPicker=true"
                        v-if="formData.templateId">{{getTplName(formData.templateId)}}</span>
                    <span class="p-t-t-info form-select form-placeholder iconfont" @click="showPicker=true" v-else>请选择模板</span>
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker show-toolbar :columns="columns" value-key="templateName" @cancel="showPicker = false"
                            @confirm="onConfirm" />
                    </van-popup>
                </div> -->
            </div>
        </div>

    </div>
</template>

<script lang="ts">
import myApi, { RawTplListRes } from "@/api/myApi";
import toast from "@/util/toast/toast";
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    @Prop({ default: {} }) detailInfo!: any;
    medicineType = {
        BOTANY: "植物",
        ZOON: "动物",
        MINERAL: "矿物",
    };
    sourceType = {
        ZPY: "自培育",
        YS: "野生",
    };
    showPicker = false;
    columns: RawTplListRes[] = [];
    formData: any = {};
    onConfirm(e: any) {
        this.showPicker = false;
        this.formData.templateId = e.templateId;
        this.$emit("tplChange", e.templateId);
    }
    getTplName(id: string) {
        const find = this.columns.find((item) => item.templateId === id);
        if (find) return find.templateName;
    }

    async mounted() {
        const loading = toast.showLoading();
        this.formData.templateId = this.detailInfo.templateId;
        try {
            const res = await myApi.getRawTpl({
                medicineType: this.detailInfo.medicineType,
                source: this.detailInfo.source,
                varietyName: this.detailInfo.varietyName,
            });
            this.columns = res.data;
        } finally {
            toast.hideLoading(loading);
        }
    }
}
</script>

<style lang="scss">
.page-top-container {
    .page-top-one {
        position: relative;
    }
    .page-top-title {
        position: absolute;
        height: 100%;
        width: 100%;
        font-size: 0.6rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-0.2rem);
    }
    .p-t-o-bg {
        width: 100%;
        min-height: 6.4rem;
    }
    .page-top-logo {
        width: 1.6rem;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0.1rem;
    }
    .page-top-two {
        position: relative;
    }
    .p-t-t-bg {
        position: absolute;
        width: 100%;
    }
    .p-t-t-border {
        width: 100%;
        display: block;
        min-height: 4.8rem;
    }
    .p-t-t-content {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        padding: 0.25rem 0.6rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .p-t-t-list {
        display: flex;
        align-items: center;
        margin-bottom: 0.15rem;
    }
    .p-t-t-title {
        flex-shrink: 0;
        font-size: 0.26rem;
        color: #3e3e3e;
        line-height: 0.28rem;
    }
    .p-t-t-text {
        display: inline-block;
        width: 1.6rem;
        text-align-last: justify;
        font-style: normal;
    }
    .p-t-t-info {
        font-size: 0.26rem;
        width: 1rem;
        flex-grow: 1;
    }
}
</style>